<template>
    <div class="coachsign">
        <el-card shadow="never animate__animated animate__fadeIn animate__fast">
            <div
                class="
                    title-top
                    onflex
                    animate__animated animate__fadeInUp animate__delay-0.5s
                "
            >
                <h2 @click="goBack" title="返回">
                    <i class="ri-arrow-left-line"></i>教练签到
                </h2>
                <div class="sign-button">
                    <el-button type="primary" @click="signMsg"
                        >立即签到</el-button
                    >
                </div>
            </div>
            <div
                class="
                    table-coachsign
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="signTate" label="签到时间">
                    </el-table-column>
                    <el-table-column prop="signNum" label="签到次数">
                    </el-table-column>
                </el-table>
            </div>
            <div
                class="
                    pagination-coachsign
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :size="pageSize"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //分页
            cPage: "",
            pageSize: 5,
            pageTotal: 50,

            tableData: [
                {
                    signTate: "2016-05-02",
                    signNum: "已签到",
                },
                {
                    signTate: "2016-05-04",
                    signNum: "未签到",
                },
                {
                    signTate: "2016-05-01",
                    signNum: "已签到",
                },
                {
                    signTate: "2016-05-03",
                    signNum: "已签到",
                },
            ],
        };
    },

    methods: {
        //返回
        goBack() {
            this.$router.go(-1);
            console.log("go back");
        },
        //点击页码
        currentChange(page) {
            console.log(page);
        },
        //签到提示
        signMsg() {
            this.$message({
                message: "签到成功",
                type: "success",
            });
        },
       
    },
};
</script>

<style lang="less" scoped>
.text-l {
    text-align: left;
}
.title-top {
    line-height: 50px;
    border-bottom: 1px solid #00000020;
    padding-bottom: 15px;
    justify-content: space-between;
    h2 {
        cursor: pointer;
    }
    i {
        vertical-align: -3px;
        margin-right: 10px;
    }
}
.table-coachsign {
    margin-top: 20px;
}
.pagination-coachsign {
    margin-top: 20px;
    text-align: end;
}
</style>